<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>API</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.data.js"></script>
        <script src="../../source/js/nova.chart.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">API</div>
        <!-- description -->
        <div id="example" class="n-content">
            <div class="configuration" style="width:170px;">
                <span class="configHead">Configuration</span>
                <span class="configTitle">API Functions</span>
                <ul class="options">
                    <li>
                        <input id="typeColumn" name="seriesType"
                                type="radio" value="column" checked="checked" autocomplete="off" />
                        <label for="typeColumn">Columns</label>
                    </li>
                    <li>
                        <input id="typeBar" name="seriesType"
                                type="radio" value="bar" autocomplete="off" />
                        <label for="typeBar">Bars</label>
                    </li>
                    <li>
                        <input id="typeLine" name="seriesType"
                                type="radio" value="line" autocomplete="off" />
                        <label for="typeLine">Lines</label>
                    </li>
                    <li>
                        <input id="stack" type="checkbox" autocomplete="off" checked="checked" />
                        <label for="stack">Stacked</label>
                    </li>
                </ul>
                <p>
                    <strong>refresh()</strong> will be called on each configuration change
                </p>
            </div>
            <div style="margin-right:210px;">
                <div id="chart" style="width:500px; height:400px;margin: 0 auto;"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").novaChart({
                        theme: $(document).data("novaSkin") || "nova",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        seriesDefaults: {
                            type: "column",
                            stack: true
                        },
                        series: [{
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78],

                            // Line chart marker type
                            markers: { type: "square" }
                        }, {
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }

                $(document).ready(function() {
                    createChart();

                    $(document).bind("nova:skinChange", function(e) {
                        createChart();
                    });

                    $(".configuration").live("change", refresh);
                });

                function refresh() {
                    var chart = $("#chart").data("novaChart"),
                        series = chart.options.series,
                        type = $("input[name=seriesType]:checked").val(),
                        stack = $("#stack").prop("checked");

                    for (var i = 0, length = series.length; i < length; i++) {
                        series[i].stack = stack;
                        series[i].type = type;
                    };

                    chart.refresh();
                }
            </script>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
